<template>
  <view class="body">
    <view
      class="card"
      v-for="(card, index) in list"
      :key="card.id"
      @click="cardDetail(card, index)"
    >
    
      <view class="card-item">
        <image :src="card.bg_pic_url" mode="aspectFill" />
        <view class="flex-x-sb flex-y-center">
          <view class="left flex-y-center">
            <image :src="card.pic_url" mode="aspectFill" />
            <view style="margin-left: 20rpx; flex: 1; width: 0">
              <view
                class="text-more-1"
                style="font-size: 34rpx; font-weight: 600"
                >{{ card.name }}</view
              >
              <view style="font-size: 24rpx; margin-top: 8rpx">
                <text>卡劵价值:{{ card.price }}</text>
              </view>
              <view style="font-size: 24rpx; margin-top: 8rpx">
               <text>核销次数:{{ card.total_num }}</text>
              </view>
            </view>
          </view>
          <!-- <view
            @click.stop="see_card_qrcode(card.id)"
            class="right flex-col flex-x-center flex-y-center"
            v-if="card.type == 1 && card.status == 0 && type != 2"
          >
            <span class="iconfont icon-QRcode" style="font-size: 6vw"></span>
            <view style="font-size: 20rpx; margin-top: 10rpx">{{
              $t("mdAdmin.clerk")
            }}</view>
          </view> -->
        </view>

        <!-- <view
          class="disable-bg"
          v-if="
            (card.type == 5 && card.video_status == 1) ||
            (card.type != 5 && card.status > 0) ||
            type == 2
          "
        ></view> -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      is_select: false,
      list:[]
    };
  },
  onLoad(){
    this.getList()
  },
  methods: {
    // see_card_qrcode(id) {
    //   this.$utils.toUrl(
    //     "/user/write_off_card/card_qrcode/card_qrcode?card_sale_id=" + id
    //   );
    // },
    cardDetail(card, index) {
         this.$utils.toUrl(
        "/user/write_off_card/write_detail?id=" + card.id
      );
    },
    async getList(){
        const res = await this.$allrequest.coupon.getWriteIndexList({}, true);
        if(res.code==0){
            this.list=res.data
        }
    }
  },
};
</script>

<style lang="less" scoped>
.body {
  min-height: 100vh;
  background: #f5f5f5;
    padding: 0rpx 24rpx;
  .card {
    display: flex;
    overflow: hidden;
    .card_edit {
      display: flex;
      align-items: center;
      width: 30rpx;
      margin: 24rpx 24rpx 24rpx 0;
      color: #626262;
      .iconfont {
        font-size: 42rpx;
      }
    }
    .card-item {
      overflow: hidden;
      position: relative;
      width: 100%;
      height: 180rpx;
      border-radius: 20rpx;
      margin-bottom: 24rpx;
      margin-top: 24rpx;
      background: #d7d7d7;
      flex-shrink: 0;
      text-shadow: 0px 3rpx 6rpx rgba(0, 0, 0, 0.16);
      color: #fff;
      > image {
        position: absolute;
        width: 100%;
        height: 100%;
      }
      > view {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        padding: 0 24rpx;

        .left {
          flex: 1;
          > image {
            width: 92rpx;
            height: 92rpx;
            background: #ffffff;
            border: 2rpx solid #f1f1f1;
            opacity: 1;
            border-radius: 120rpx;
          }
        }
      }

      .disable-bg {
        width: 100%;
        height: 100%;
        background-color: #eeeeee;
        opacity: 0.6;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 111;
      }
    }
  }
}
</style>
